<template>
  <div>
    <Dropdown style="margin-left: 850px" @on-click="selectMonth">
      <Button type="primary" style="margin-left: 300px; ">
        请选择月份:{{this.name}}月
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list" style="">
        <DropdownItem name="1" selected>1月</DropdownItem>
        <DropdownItem name="2">2月</DropdownItem>
        <DropdownItem name="3">3月</DropdownItem>
        <DropdownItem name="4">4月</DropdownItem>
        <DropdownItem name="5">5月</DropdownItem>
        <DropdownItem name="6">6月</DropdownItem>
        <DropdownItem name="7">7月</DropdownItem>
        <DropdownItem disabled>8月</DropdownItem>
        <DropdownItem disabled>9月</DropdownItem>
        <DropdownItem disabled>10月</DropdownItem>
        <DropdownItem disabled>11月</DropdownItem>
        <DropdownItem name="12">12月</DropdownItem>
      </DropdownMenu>
    </Dropdown>

    <Input v-model="value"  search clearable placeholder="请输入站点(1004-1191)" style="margin-left: 1150px; margin-top: 15px; width: 170px" :minlength=4 :maxlength=4 @on-search="updateStation"/>
    范围为1004-1191

    <div>
      <div id="pieChart" style="height: 600px;width: 1000px; margin-left: 260px"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import { findByOneMonthStationInOut } from '../../../http/request'
export default {
  name: 'index',
  data () {
    return {
      name: 1,
      value: 1004,
      in_num: [],
      out_num: []
    }
  },

  mounted () {
    findByOneMonthStationInOut(this.name, this.value).then(res => {
      console.log(this.name)
      console.log(this.value)
      console.log(res.data)
      for (let r in res.data) {
        this.in_num = res.data[r].in_num
        this.out_num = res.data[r].out_num
      }
      this.pieChart()
    })
  },

  methods: {
    pieChart () {
      let pieChart = echarts.init(document.getElementById('pieChart'))
      pieChart.setOption({
        title: {
          text: '单个站点的进出人数',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '60%',
            data: [
              { value: this.in_num, name: '进站点的人数', itemStyle: { color: '#96B0D4' } },
              { value: this.out_num, name: '出站点的人数', itemStyle: { color: '#D1624C' } }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    selectMonth (name) {
      this.name = name
      console.log(name)
      findByOneMonthStationInOut(this.name, this.value).then(res => {
        for (let r in res.data) {
          this.in_num = res.data[r].in_num
          this.out_num = res.data[r].out_num
        }
        console.log(this.in_num)
        console.log(this.out_num)
        this.pieChart()
      })
    },
    updateStation () {
      console.log(this.value)
      findByOneMonthStationInOut(this.name, this.value).then(res => {
        console.log(this.name)
        console.log(this.value)
        for (let r in res.data) {
          this.in_num = ((res.data[r].in_num))
          this.out_num = (res.data[r].out_num)
        }

        console.log(this.in_num)
        console.log(this.out_num)
        this.pieChart()
      })
    }
    /*           submitData(){
                   console.log(this.value);
                   findByOneMonthStationInOut(this.name, this.value).then(res => {
                       console.log(this.name);
                       console.log(this.value)
                       for(let r in res.data) {
                           this.in_num=((res.data[r].in_num));
                           this.out_num=(res.data[r].out_num)
                       }

                       console.log(this.in_num);
                       console.log(this.out_num);
                       this.pieChart();
                   }) */

    // }
  }
}
</script>
}

<style scoped>

</style>
